

<template>
    <div v-if="isInVsui">
        <teleport :to="domSelect">
            <el-tooltip effect="dark" content='' placement="bottom">
                <template #content>
                    <p>这是@vsui/vue-multiplex@2.1.0-rc3之后版本提供的UI扩展坞，扩展坞是以"vsui-extend"开头的html标签，您可以使用样式选择器查询到扩展坞</p>
                    <p>扩展坞是vsui.vue框架核心封装成为@vsui/vue-multiplex组件后应对外部变化提供的扩展能力，是UI组件化并仍需扩展的最佳实践与成功案例</p>
                    <p>UI扩展坞用来解决框架能确定变化位置但不能确定变化内容的场景，由核心库提供外框架UI扩展坞，由项目决定扩展坞放什么内容。</p>
                    <p>这是统一框架与变化项目的结合方式，扩展坞演示请见"框架二开-ui扩展-扩展演示"，扩展坞使用有两种最佳实践，请注意查看示例！</p>
                    <p>-->该扩展文件请见模板工程\"examples\components\vsui.extend\example2\vsui-extend-header-tools-left.vue"文件</p>
                </template>
                <el-input v-model="input" placeholder="我是一个扩展的查询输入框" />
            </el-tooltip>
        </teleport>
    </div>
</template>

<script>
import {vue,runtimeCfg} from '../../../assets/core';
import {ElInput,ElTooltip} from 'element-plus';
export default {
    components:{ElInput,ElTooltip},
    props:{},
    setup() {
        let input=vue.ref(""),_isInVsui=vue.ref(false),domSelect=".vsui-multiplex .vsui-header .vsui-header-other vsui-extend-header-tools-left";
        const isInVsui=vue.computed(()=>{
            input.value="";
            return _isInVsui.value
        })
        vue.onMounted(()=>{
            window.setInterval(() => {
                let dom=document.querySelector(domSelect);
                _isInVsui.value=(dom!=null);
            }, 100);
            
        })
        return {
            input,
            isInVsui,
            domSelect,
            runtimeCfg,
        }
    }

}
</script>